<div class="zx-panel">

  <div class="panels">
    <div class="panel-wrap" (click)="showModal(tplContent)">
      <div class="jrsq-title">
        <img src="assets/images/ght/glc/title-text-bg.png">
        今日水情
      </div>
      <div class="jrsq">
        <nz-carousel nzAutoPlay>
          <div nz-carousel-content *ngFor="let item of jrsqData">
            <div class="total" *ngIf="item.name">
              <span class="text">{{ item.name }}</span>
              <span class="value">{{ item.flow }}</span>
            </div>
            <div class="others">
              <div *ngFor="let child of item.children">
                <span class="text">{{child.name}}</span>
                <span class="value">{{child.flow}}</span>
              </div>
            </div>
          </div>
        </nz-carousel>
      </div>
    </div>

    <div class="panel-wrap" (click)="ggjdModalShow=true">
      <div class="panel-title">引用水情况</div>

      <div class="section-wrap">
        <div class="section">
          <div class="sub-title">
            <span><strong>引水量</strong>&nbsp;（单位：亿m³）</span>
          </div>
          <div class="content">
            <div class="row">
              <div class="unit">
                <span class="text">计划</span>
                <span class="value">{{waterData['planVal']}}</span>
              </div>
              <div class="unit">
                <span class="text">实际</span>
                <span class="value">{{waterData['val']}}</span>
              </div>
            </div>

            <div class="row">
              <div class="unit">
                <span class="text">占计划</span>
                <span class="value">{{(waterData['planPer']*100).toFixed(2) + '%'}}</span>
              </div>
              <div class="unit">
                <span class="text">去年同期</span>
                <span class="value">{{waterData['lastVal']}}</span>
              </div>
            </div>

            <div class="row">
              <div class="unit">
                <span class="text">占去年同期</span>
                <span class="value">{{(waterData['lastPer']*100).toFixed(2) + '%'}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="section">
          <div class="sub-title">
            <span><strong>灌溉进度</strong>&nbsp;（单位：万亩）</span>
          </div>
          <div class="content">
            <div class="row">
              <div class="unit">
                <div class="text">小麦头水已灌</div>
                <div class="value">{{ggjdData['小麦头水'] || 0}}</div>
              </div>
              <div class="unit">
                <div class="text">小麦二水已灌</div>
                <div class="value">{{ggjdData['小麦二水'] || 0}}</div>
              </div>
            </div>
            <div class="row">
              <div class="unit">
                <div class="text">小麦三水已灌</div>
                <div class="value">{{ggjdData['小麦三水'] || 0}}</div>
              </div>
              <div class="unit">
                <div class="text">水稻已灌</div>
                <div class="value">{{ggjdData['水稻'] || 0}}</div>
              </div>
            </div>
            <div class="row">
              <div class="unit">
                <div class="text">玉米已灌</div>
                <div class="value">{{ggjdData['玉米'] || 0}}</div>
              </div>
              <div class="unit">
                <div class="text">其他已灌</div>
                <div class="value">{{ggjdData['其他'] || 0}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="warning-wrap">
    <div class="title">警情</div>
    <div class="content">
      <p *ngFor="let item of warningList">
        <strong>【{{item.title}}】</strong> {{item.info}}
      </p>
    </div>

  </div>

  <nz-modal
    nzClassName="dispatch-modal"
    nzWidth="1300"
    [nzStyle]="{ top: '20px' }"
    [(nzVisible)]="ggjdModalShow"
    (nzOnCancel)="ggjdModalShow=false"
    [nzFooter]="null"
    nzTitle="引用水情况">
    <div>
      <div style="padding: 20px">
        <nz-radio-group [(ngModel)]="ggjdReportType" [nzButtonStyle]="'solid'" (ngModelChange)="queryGqjjReport()">
          <label nz-radio-button [nzValue]="1">管理处</label>
          <label nz-radio-button [nzValue]="2">市县</label>
        </nz-radio-group>
      </div>

      <iframe [src]="ggjdReportSrc" frameborder="0" style="height: 680px;width: 100%"></iframe>
    </div>
  </nz-modal>

  <ng-template #tplContent let-params let-ref="modalRef">
    <app-jrsq-big-carousel></app-jrsq-big-carousel>
  </ng-template>
</div>

